<template>
  <page-view class="page-view">
    <div class="palyList">
      <!-- 背景图 -->
      <img :src="playlist.coverImgUrl" alt="" class="beijing" />
      <!-- 歌单头部 -->
      <PalyListTop name="记忆中的心跳" text="" icon_name2="列表"></PalyListTop>

      <!-- 歌单介绍 -->
      <div class="palyList_content">
        <div class="content_left" ref="content_left">
          <div class="palyCount">
            {{ parseInt(playlist.playCount / 10000) }}万
          </div>
        </div>
        <div class="content_right">
          <div class="songList_name">{{ playlist.name }}</div>
          <div class="author font_one">
            <img :src="creator.avatarUrl" alt="" class="authorAvatar" />
            {{ creator.nickname }}
          </div>
          <div class="description font_one">{{ playlist.description }}</div>
        </div>
      </div>

      <!-- 歌单播放量、评论数、分享数 -->
      <div class="count">
        <div class="playCount">
          <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-shoucang"></use>
        </svg>
          <span>{{ playlist.subscribedCount }}</span>
        </div>
        <div class="commentCount">
          <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-jianyi"></use>
        </svg>
          <span>{{ playlist.commentCount }}</span>
        </div>
        <div class="shareCount">
          <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
          <span>{{ playlist.shareCount }}</span>
        </div>
      </div>

      <div class="gedan">
        <div class="bofangquanbu">
          <div class="bf_icon"></div>
          <span>播放全部&nbsp;({{ playlist.trackCount }})</span>
          <div class="xz_icon"></div>
          <div class="wc_icon"></div>
        </div>
        <div class="songList">
          <div
            class="songItem"
            v-for="(song, index) in tracks"
            :key="index"
            @click="play(song,index)"
          >
            <div class="index">{{index}}</div>
            <div class="song">
              <p style="margin-top: 17px;">{{ song.name }}</p>
              <p>{{ song.al.name }}</p>
            </div>
            <div class="icon_2" style="line-height: 97px;">
              <svg class="icon" aria-hidden="true" style="margin-right:5px">
                    <use xlink:href="#icon-shipinbofang"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao-dian"></use>
                  </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-view>
</template>

<script>
import { onMounted } from "@vue/runtime-core";
import Api from "../utils/api";
import { useRoute,useRouter } from "vue-router";
import { useStore, mapMutations } from "vuex";
import PalyListTop from "../components/playListTop.vue";
import { toRefs, reactive, ref } from "vue";
export default {
  name: "RecommendSongs",
  components: { PalyListTop },
  setup() {
    const store = useStore();
    const router = useRouter()
    const route = useRoute();
    let content_left = ref(null);
    let playListInfo = reactive({
      playlist: {},
      creator: {},
      tracks: [],
      oneSongInfo:{}
    });
    
    const getRecommendSongs = async (id) => {
      const results = await Api.RecommendSongs.getRecommendSongs(id);
      console.log("全部结果", results);
      playListInfo.playlist = results.playlist;
      playListInfo.creator = results.playlist.creator;
      playListInfo.tracks = results.playlist.tracks;
      store.commit("setPlayList", playListInfo.tracks);
      // console.log('解构结果',playListInfo);
      // console.log('图片',playListInfo.playlist.coverImgUrl);
      content_left.value.style.backgroundImage = `url('${playListInfo.creator.backgroundUrl}')`;
      content_left.value.style.backgroundRepeat = "no-repeat";
      content_left.value.style.backgroundPosition = "center";
      content_left.value.style.backgroundSize = "cover";
    };

    const play = (song,index) => {
      store.commit('setPlayIndex',index)
      console.log(index);
      //只需要传一个index即可，仓库可以拿到具体的歌
      router.push({name:'songPlayDetail',query:{index_current:index}})
    };
    onMounted(() => {
      // console.log(route.query.id);
      getRecommendSongs(route.query.id);
      // console.log(playListInfo.playlist.coverImgUrl);
      // palyList.value.style.backgroundImage = `url('${playListInfo.playlist.coverImgUrl}')`;
    });

    return {
      ...toRefs(playListInfo),
      content_left,
      play,
      ...mapMutations(["setPlayIndex"]),
    };
  },
};
</script>

<style lang="less" scoped>


.palyList {
  width: 7.5rem;
  // height: 260px;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
  color: white;
  position: relative;
  // background-color: red;
  // background: url('../');
  .beijing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    filter: blur(10px);
    z-index: -1;
  }
  .palyList_content {
    width: 6.5rem;
    margin: auto;
    height: 190px;
    padding: 10px 0 35px 0;
    // background-color: orange;
    display: flex;
    justify-content: space-between;
    .content_left {
      width: 120px;
      height: 120px;
      // border: 1px solid black;
      border-radius: 10px;
      box-shadow: 0px 0px 8px gainsboro;
      font-size: 12px;

      position: relative;
      .palyCount {
        position: absolute;
        top: 6px;
        right: 10px;
        width: 50px;
        height: 20px;
        line-height: 20px;
        // border: 1px solid black;
        text-align: center;
      }
    }
    .content_right {
      width: 58%;
      height: 120px;
      // border: 1px solid black;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      & > div {
        width: 100%;
        // border: 1px solid black;
      }
      .songList_name {
        height: 40%;
      }
      .author {
        height: 20%;
        .authorAvatar {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
      .description {
        height: 15%;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  .count {
    position: absolute;
    top: 242px;
    border-radius: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50px;
    background-color: white;
    color: black;
    font-size: 13px;
    box-shadow: 8px 8px 8px gainsboro;
    display: flex;
    align-items: center;
    & > div {
      flex: 1;
      text-align: center;
      // position: relative;
      // border: 1px solid black;
      .icon{
        // position: absolute;
        // left: 50%;
        // top: 50%;
        // transform: translate(-50%,-50%);
        vertical-align: -5px;
        width: 20px;
        height: 20px;
        margin-right: 2px;
      }
    }
    .playCount {
      border-right: 1px solid gainsboro;
    }
    .commentCount {
      border-right: 1px solid gainsboro;
    }
  }

  //
  .gedan {
    width: 6.5rem;
    margin: auto;
    margin-top: 50px;
    color: black;

    .bofangquanbu {
      height: 50px;
      line-height: 50px;
      // background-color: orange;
      width: 100%;
    }

    .songList {
      // background: yellow;
      height: 256px;
      overflow: scroll;
      .songItem {
        height: 80px;
        width: 100%;
        border: 1px solid black;
        display: flex;
        align-items: center;
        // line-height: 80px;
        & > div {
          border: 1px solid black;
        }
        .index {
          width: 5%;
          height: 100%;
          line-height: 80px;
          text-align: left;
        }
        .song {
          width: 70%;
          line-height: 20px;
          height: 100%;
        }
        .icon_2 {
          width: 25%;
          height: 100%;
        }
      }
    }
  }
}
</style>